/*
 * @Author: hy
 * @Date: 2018-05-02 09:52:10
 * @Last Modified by: hy
 * @Last Modified time: 2018-05-16 21:31:03b4038
 */

// 竞彩足球提交页面

import React, { Component } from 'react'
import {
  WingBlank, WhiteSpace, Tabs, Modal, Toast, Checkbox, Flex, ActionSheet,
} from 'antd-mobile'
import NavBar from '@components/navbar'
import { withRouter } from 'react-router-dom'
import Button from '@components/button'

@withRouter
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 是否选中服务协议
      checkedAgreement: false,
      // 选中的玩法比率
      checkedData: [
        {
          date: '周六001',
          hostName: '曼联',
          guessName: '利物浦',
          value: [
            {
              type: '胜平负',
              value: '主胜',
            },
            {
              type: '比分',
              value: '1:2',
            },
          ],
        },
        {
          date: '周日002',
          hostName: '曼城',
          guessName: '阿森纳',
          value: [
            {
              type: '胜平负',
              value: '平',
            },
            {
              type: '胜平负',
              value: '平',
            },

            {
              type: '胜平负',
              value: '平',
            },
          ],
        },
      ],
    }
  }


  /**
   * 提交购彩
   */
  onSubmit=() => {
    console.log('提交购彩')
  }


  /**
   * 删除一项
   */
  onDeleteItem=(item) => {
    Modal.alert('提示', '确定删除该项吗?', [
      { text: '取消', onPress: () => console.log('cancel') },
      { text: '确定', onPress: () => console.log('ok') },
    ])
  }


  /**
   * 添加编辑赛事
   */
  onAddEdit=() => {
    console.log('添加编辑赛事')
    this.props.history.push('/jczq/choose')
  }

  /**
   * 显示服务协议
   */
  onShowAgreeText=(e) => {
    e.stopPropagation()
    e.preventDefault()
    console.log('服务协议')
  }

  /**
   * 减去倍投
   */
  onMinus=() => {

  }

  /**
   * 增加倍投
   */
  onAdd=() => {

  }

  /**
   * 选择方法
   */
  showMethodActionSheet = () => {
    const BUTTONS = ['2串1', '2串3', '2串2', '取消'];
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      title: '请选择方式',
      maskClosable: true,
    },
    (buttonIndex) => {
      console.log(BUTTONS[buttonIndex])
    });
  }

  render() {
    const {
      checkedData,
      checkedAgreement,
    } = this.state
    const title = '竞彩足球'
    return (
      <div className="page-box">
        <NavBar
          left={<span className="app-icon icon-left" onClick={this.props.history.goBack} />}
          title={title}
          right={null}
        />
        <div className="page-content contain-footer contain-agreement">
          <div className="page-submit">
            <div className="paper-wrap">
              {
                checkedData.map((item, index) => {
                  const result = (
                    <div className="list-item" key={index.toString()}>
                      <p className="title-bar">
                        <span>{item.date}</span>
                        <span>{item.hostName}&nbsp;&nbsp;VS&nbsp;&nbsp;{item.guessName}</span>
                      </p>
                      {
                        item.value.map((value, i) => {
                          const re = (
                            <div className="list-item-row" key={i.toString()}>
                              <img src="resource/image/paper-close.png" alt="删除" className="item-close" onClick={() => this.onDeleteItem(value)} />
                              <p><span>{value.type}：</span><span>{value.value}</span></p>
                            </div>
                          )
                          return re
                        })
                      }
                    </div>
                  )
                  return result
                })
              }
              <img src="resource/image/paper-header.png" className="paper-header" alt="" />
              <img src="resource/image/paper-footer.png" className="paper-footer" alt="" />
            </div>
            <div className="font-red add-edit-btn" onClick={this.onAddEdit}>+添加/删除赛事</div>

          </div>
          {/* 用户协议和倍数 */}
          <div className="page-submit-footer">
            <div className="flex-row-base agreement">
              <Checkbox.AgreeItem data-seed="logId" checked={checkedAgreement} onChange={(e) => { this.setState({ checkedAgreement: e.target.checked }) }}>
                  我已阅读并同意
                <a onClick={this.onShowAgreeText} className="font-yellow">《用户服务协议》</a>
              </Checkbox.AgreeItem>
            </div>
            <div className="method-row flex-row-base">
              <div className="row-left">
                <span onClick={this.showMethodActionSheet}>2串1<span className="app-icon icon-drop" /></span>
              </div>
              <div className="row-right flex-row-base">
                <span onClick={this.onMinus}>-</span>
                <span>倍投1</span>
                <span onClick={this.onAdd}>+</span>
              </div>
            </div>
          </div>
        </div>

        <div className="page-footer">
          <div className="jczq-footer">
            <div className="right-content">
              <p><span>1注</span>&nbsp;&nbsp;合计<span className="font-red">2</span>元</p>
              <p>预计奖金：<span className="font-red">12100321.323</span>元</p>
            </div>
            <Button type="red" disabled={false} onClick={this.onSubmit}>提交购彩</Button>
          </div>
        </div>
      </div>
    )
  }
}
